/**
 * Author: Shen Yanqiu
 * Date: 2017-12-18
 * Time: 19:33
 *
 */
import React from 'react';
import { connect } from 'dva';
import { Row, Col, List, Avatar, Icon, Button, Layout, Affix } from 'antd';
import { Link } from 'react-router-dom';
import styles from './MyMember.less';
import Page from "../../../components/Page";
import PropTypes from "prop-types";

const { Sider, Content } = Layout;
class MyMember extends React.Component {
  static propTypes = {
    form: PropTypes.object,
    dispatch: PropTypes.func,
    loading: PropTypes.object,
    accountmanagement: PropTypes.object,
    app: PropTypes.object,
  };
  render () {
    const { loading, app } = this.props;
    const listData = [
      {
        id: '112312112233533',
        url: 'http://qspinach.cn/build/images/138012-20161016201708124-1116595594.png',
        name: '北京大学学生会',
        depart: '新闻部',
        position: '干事',
      },
      {
        id: '112312112233533',
        url: 'http://qspinach.cn/build/images/138012-20161016201708124-1116595594.png',
        name: '北京大学学生会',
        depart: '新闻部',
        position: '干事',
      },
      {
        id: '112312112233533',
        url: 'http://qspinach.cn/build/images/138012-20161016201708124-1116595594.png',
        name: '北京大学学生会',
        depart: '新闻部',
        position: '干事',
      },
      {
        id: '112312112233533',
        url: 'http://qspinach.cn/build/images/138012-20161016201708124-1116595594.png',
        name: '北京大学学生会',
        depart: '新闻部',
        position: '干事',
      },
      {
        id: '112312112233533',
        url: 'http://qspinach.cn/build/images/138012-20161016201708124-1116595594.png',
        name: '北京大学学生会',
        depart: '新闻部',
        position: '干事',
      },
      {
        id: '112312112233533',
        url: 'http://qspinach.cn/build/images/138012-20161016201708124-1116595594.png',
        name: '北京大学学生会',
        depart: '新闻部',
        position: '干事',
      },
      {
        id: '112312112233533',
        url: 'http://qspinach.cn/build/images/138012-20161016201708124-1116595594.png',
        name: '北京大学学生会',
        depart: '新闻部',
        position: '干事',
      },
      {
        id: '112312112233533',
        url: 'http://qspinach.cn/build/images/138012-20161016201708124-1116595594.png',
        name: '北京大学学生会',
        depart: '新闻部',
        position: '干事',
      },
      {
        id: '112312112233533',
        url: 'http://qspinach.cn/build/images/138012-20161016201708124-1116595594.png',
        name: '北京大学学生会',
        depart: '新闻部',
        position: '干事',
      },
      {
        id: '112312112233533',
        url: 'http://qspinach.cn/build/images/138012-20161016201708124-1116595594.png',
        name: '北京大学学生会',
        depart: '新闻部',
        position: '干事',
      },
    ];
    const clickHandler = (id) => {
      console.log(id);
    };
    return (
      <Page loading={loading.effects['accountmanagement/laterSomeSecond']}>
        <div className={styles.mymemberBlock}>
          <Row>
            <Col span={2} />
            <Col span={22}>
              <List
                itemLayout="horizontal"
                size="large"
                dataSource={listData}
                renderItem={item => (
                  <List.Item>
                    <List.Item.Meta
                      avatar={<div className={styles.imgBlock}><img src={item.url} alt="" /></div>}
                      title={
                        <div>
                          <p>名称：{item.name}</p>
                          <p>部门：{item.depart}</p>
                          <p>职位：{item.position}</p>
                          <div>
                            <Button type="danger" size="small" onClick={() => clickHandler(item.id)}>退出此社团</Button>
                          </div>
                        </div>
                      }
                      description=""
                    />
                  </List.Item>
                )}
              />
            </Col>
          </Row>
        </div>
      </Page>
    );
  }
}
export default connect(({ loading, accountmanagement, app }) => ({ loading, accountmanagement, app }))(MyMember);
